<template>
  <!-- 分类歌单 -->
  <div class="playlist-item-box">
    <div class="playlist-cover">
      <span class="playCount">
        <i class="iconfont">&#xe622;</i>
        {{ item.playCount | shortCount }}
      </span>
      <a href="javascript:;" @click="clickPlaylistDetail(item.id)">
        <img class="playlist-pic" :src="item.coverImgUrl" :alt="item.name" />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.name"
        @click="clickPlaylistDetail(item.id)"
      >
        {{ item.name }}
      </a>
    </h4>
    <h4 class="playlist-creator">
      by
      <a
        href="javascript:;"
        :title="item.creator.nickname"
        @click="clickUserDetail()"
      >
        {{ item.creator.nickname }}
      </a>
    </h4>
  </div>
</template>

<script>
import { shortCount } from "common/count";
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    shortCount(count) {
      return shortCount(count);
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.item);
  },
  methods: {
    clickPlaylistDetail(id) {
      this.playPlaylistDetail(id);
    },
  },
};
</script>

<style>
.playlist-creator {
  height: 22px;
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>